<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
<title> ::: 골프인 :::</title>
<link rel="stylesheet" type="text/css" href="../css/common.css">
<!-- <script  src="../js/common.js"></script>
<script  src="../js/jquery.js"></script>
<script src="../js/jquery.mobile-1.1.0.js"></script>
<script src="../js/src/mjson.js"></script>
<script src="../js/src/connectionmanager.js"></script>
<script src="../js/src/member/join_01.js"></script>
<script src="../js/src/member/pop_id.js"></script> -->
</head>

<body>
<section data-role="page" data-theme="d" class="container gray_bg" id="member_join_01">
    <!--top-->
    <header data-role="header" data-position="fixed" data-tap-toggle="false">
        <!--title-->
        <div class="top_title_Gre">
            <h2>회원가입 </h2>
            <!--left  btn-->
            <div class="top_left">
                <a href="join.html" data-direction="reverse" data-transition="slide" class="ico_btn btn8">이전</a>
            </div>
        </div><!-- // class="top_title_Gre" 끝  -->
    </header><!-- // header  -->
    
    <!--메인 컨텐츠-->
    <section data-role="content" data-theme="d">
        <!--step-->
        <nav class="join_step ui-grid-b">
            <div class="ui-block-a">약관동의<span>→</span></div>
            <div class="ui-block-b on">회원정보입력<span>→</span></div>
            <div class="ui-block-c">가입완료</div>
        </nav>
        <p class="mem_txt">골프인 회원가입을 위해<br /> 아래 회원정보를 입력하여 주세요. </p>
        
        <form action="#" method="#">
            <ul class="join_form">
                <!--이름 -->
                <li data-role="fieldcontain">
                    <fieldset>
                        <legend>이름</legend>
                        <div class="ui-grid-a block1">
                            <div class="ui-block-a"><input type="search" id="nameInput"/> </div>
                            <div class="ui-block-b">
                            	<button  data-inline="true" id="checkName">실명인증</button>
                            </div>
                        </div>
                    </fieldset> 
                </li>
                
                <!--아이디 -->
                <li data-role="fieldcontain">
                    <fieldset>
                        <legend>아이디</legend>
                        <div class="ui-grid-a block1">
                            <div class="ui-block-a"><input type="search" placeholder="4~12자이하 영문, 숫자" id="IDInput"/> </div>
                            <div class="ui-block-b"><a href="pop_id.html" data-role="button" data-rel="dialog" data-transition="slide"  data-inline="true" id="checkID">중복확인 </a></div>
                        </div>
                        <!--사용중일때 보일는 txt-->
                        <div class="con_ok" id="id_no">이미 사용중인  아이디 입니다.</div>
                        
                        <!--사용가능할때 보일는 txt-->
                        <div class="con_re" id="id_ok">사용 가능한  아이디 입니다.</div>
                    </fieldset> 
                </li>
                
                <!--닉네임 -->
                <li data-role="fieldcontain">
                    <fieldset>
                        <legend>닉네임</legend>
                        <div class="ui-grid-a block1">
                            <div class="ui-block-a"><input type="search" placeholder="2~6자 이하" id="nicInput" /> </div>
                            <div class="ui-block-b"><button  data-inline="true" id="checkNic">중복확인</button></div> 
                        </div>
                        <!--사용중일때 보일는 txt-->
                        <div class="con_ok" id="nic_no">이미 사용중인  닉네임 입니다.</div>
                        
                        <!--사용가능할때 보일는 txt-->
                        <div class="con_re" id="nic_ok">사용 가능한  닉네임 입니다.</div>
                    </fieldset> 
                </li>
                
                <!--비밀번호 -->
                <li data-role="fieldcontain">
                    <fieldset>
                        <legend>비밀번호</legend>
                        <input type="password" placeholder="4~12자 이하 영문 또는 숫자"  id="originalPass"/> 
                    </fieldset> 
                </li>
                
                <!--비밀번호확인 -->
                <li data-role="fieldcontain">
                    <fieldset>
                        <legend>비밀번호 확인</legend>
                        <input type="password" placeholder="4~12자 이하 영문 또는 숫자" id="checkPass"/> 
                    </fieldset> 
                </li>
                
                <!--휴대폰 -->
                <li data-role="fieldcontain">
                    <fieldset>
                        <legend>휴대폰</legend>
                        <select data-theme="c" id="phoneOption">
                            <option value="1">SKT</option>
                            <option value="2">KTF</option>
                            <option value="3">LGT</option>
                        </select>
                        <div class="form1">
                            <select data-theme="c" id="phoneHead">
                                <option value="010">010</option>
                                <option value="011">011</option>
                                <option value="016">016</option>
                                <option value="017">017</option>
                                <option value="018">018</option>
                                <option value="019">019</option>
                            </select>
                               -   
                            <input type="text"  id="phoneBody"/>  -   <input type="text" id="phoneFoot" />
                        </div><!-- //  class="form1" -->
                        <div class="ui-grid-a block2">
                            <div class="ui-block-a"><input id="phoneCode" type="text" placeholder="인증번호를 입력하세요" /> </div>
                            <div class="ui-block-b"><button  data-inline="true" id="getCode" >인증번호받기</button></div>
                        </div>
                        <p class="txt">※  휴대폰 인증번호 확인을 하지 않으면  조인룸, 부킹 이용이 제한 됩니다.</p>
                    </fieldset> 
                </li>
                
                <!--이메일 주소 -->
                <li data-role="fieldcontain">
                    <fieldset>
                        <legend>이메일 주소</legend>
                        <div class="form2">
                            <input type="text" id="mailAddress"/>  @  <input type="text" id="mailCompany"/>                            
                        </div><!-- //  class="form2" -->
                        <div class="ui-grid-a block1">
                            <div class="ui-block-a">
                                <select data-theme="c" id="mailOption">
                                    <option value="">직접입력</option>
                                    <option value="naver.com">naver.com</option>
                                    <option value="daum.net">daum.net</option>
                                    <option value="nate.com">nate.com</option>
                                    <option value="dreamwiz.com">dreamwiz.com</option>
                                </select>
                            </div>
                            <div class="ui-block-b"><button  data-inline="true" id="checkMail">중복확인</button></div>
                        </div><!-- //  class="ui-grid-a" -->
                        
                        <p class="txt ma_bottom10">※  이메일 주소를 모르시면 ID찾기, 비밀번호 재발급을 이용하실 수 없습니다. 이메일 주소를 꼭 기억해 주시기 바랍니다.</p>
                        
                        <input type="checkbox" name="#" id="a1" data-theme="c" /><!-- id값과 for값이 동일하게 작업하세요!  -->
                        <label for="a1">이벤트 및 정보메일 수신 </label>
                    </fieldset> 
                </li>
                
                <!--성별 -->
                <li data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-type="horizontal">
                        <legend>성별</legend>
                        <input type="radio" name="#" id="b1" /><!-- id값과 for값이 동일하게 작업하세요!  -->
                        <label for="b1">남자</label>
                        <input type="radio" name="#" id="b2" /><!-- id값과 for값이 동일하게 작업하세요!  -->
                        <label for="b2">여자</label>
                    </fieldset> 
                </li>
                
                <!--조인룸 초대 수신 여부  -->
                <li data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-type="horizontal">
                        <legend>조인룸 초대 수신 여부 </legend>
                        <span class="ans">다른 골프인 회원의 조인룸 초대를 받으시겠습니까?</span>
                        <input type="radio" name="#" id="c1" /><!-- id값과 for값이 동일하게 작업하세요!  -->
                        <label for="c1">예</label>
                        <input type="radio" name="#" id="c2" /><!-- id값과 for값이 동일하게 작업하세요!  -->
                        <label for="c2">아니오</label>
                    </fieldset> 
                </li>
            </ul><!-- //  class="join_form" 끝  -->
            
            <!--btn-->
            <div data-role="fieldcontain" class="ui-grid-a join_bt">
                <div class="ui-block-a"><a href="#" data-role="button" data-theme="a"  id="checkAll" >확인</a></div>
                <div class="ui-block-b"><a href="#" data-role="button" data-theme="d"  id="cancelAll">취소</a></div>
                <!--div class="ui-block-b"><button data-theme="d" id="cancelAll">취소</button></div-->
            </div>
            
        </form>
    </section><!-- // content -->
</section><!-- // page -->
</body>
</html>
